<template>
  <div id="station">
    <div class="row row-1"></div>
    <div class="row row-2">
      <div class="declare">
        <p class="ellipsis">重点区域</p>
      </div>
    </div>
    <div class="row row-3">
      <div class="col col-1">
        <div id="leaflet-station" class="leaflet"></div>
        <div class="select">
          <el-select
            v-model="districtId"
            placeholder=""
            @change="changeDistrict"
          >
            <el-option
              v-for="item in districtDataList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div
          :class="velocityShow === 1 ? 'velocity active' : 'velocity'"
          @click="showVelocity()"
        ></div>
        <div class="flush" @click="flushMap()"></div>
        <div class="show-keyword">
          <div class="row row-1">
            <div class="col">
              <p
                :class="
                  showKeyWord.toLowerCase() === 'aqi' ? 'item active' : 'item'
                "
                @click="createMarkerByKey('AQI')"
              >
                AQI
              </p>
            </div>
          </div>
          <div class="row row-2">
            <div class="col">
              <p
                :class="
                  showKeyWord.toLowerCase() === 'pm25' ? 'item active' : 'item'
                "
                @click="createMarkerByKey('PM25')"
              >
                PM2.5
              </p>
            </div>
          </div>
          <div class="row row-3">
            <div class="col">
              <p
                :class="
                  showKeyWord.toLowerCase() === 'pm10' ? 'item active' : 'item'
                "
                @click="createMarkerByKey('PM10')"
              >
                PM10
              </p>
            </div>
          </div>
          <div class="row row-4">
            <div class="col">
              <p
                :class="
                  showKeyWord.toLowerCase() === 'so2' ? 'item active' : 'item'
                "
                @click="createMarkerByKey('SO2')"
              >
                SO2
              </p>
            </div>
          </div>
          <div class="row row-5">
            <div class="col">
              <p
                :class="
                  showKeyWord.toLowerCase() === 'no2' ? 'item active' : 'item'
                "
                @click="createMarkerByKey('NO2')"
              >
                NO2
              </p>
            </div>
          </div>
          <div class="row row-6">
            <div class="col">
              <p
                :class="
                  showKeyWord.toLowerCase() === 'co' ? 'item active' : 'item'
                "
                @click="createMarkerByKey('CO')"
              >
                CO
              </p>
            </div>
          </div>
          <div class="row row-7">
            <div class="col">
              <p
                :class="
                  showKeyWord.toLowerCase() === 'o3' ? 'item active' : 'item'
                "
                @click="createMarkerByKey('O3')"
              >
                O3
              </p>
            </div>
          </div>
          <div class="row row-8">
            <div class="col">
              <p
                :class="
                  showKeyWord.toLowerCase() === 'temperature'
                    ? 'item active'
                    : 'item'
                "
                @click="createMarkerByKey('temperature')"
              >
                温度
              </p>
            </div>
          </div>
          <div class="row row-9">
            <div class="col">
              <p
                :class="
                  showKeyWord.toLowerCase() === 'humidity'
                    ? 'item active'
                    : 'item'
                "
                @click="createMarkerByKey('humidity')"
              >
                湿度
              </p>
            </div>
          </div>
          <div class="row row-10">
            <div class="col">
              <p
                :class="
                  showKeyWord.toLowerCase() === 'windspeed'
                    ? 'item active'
                    : 'item'
                "
                @click="createMarkerByKey('windspeed')"
              >
                风速
              </p>
            </div>
          </div>
          <div class="row row-11">
            <div class="col">
              <p
                :class="
                  showKeyWord.toLowerCase() === 'pressure'
                    ? 'item active'
                    : 'item'
                "
                @click="createMarkerByKey('pressure')"
              >
                气压
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="col col-2">
        <div class="row row-1">
          <div class="col col-1">
            <div class="row">
              <p class="ellipsis">微站污染数值排行</p>
            </div>
          </div>
          <div class="col col-2">
            <div class="row row-1">
              <div class="row">
                <div class="col col-1">
                  <input
                    type="text"
                    maxlength="50"
                    v-model.trim="searchCondition"
                  />
                </div>
                <div class="col col-2">
                  <div class="button" @click="searchFunc()"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row row-2">
          <div class="col col-1">
            <div class="row">
              <div class="row">
                <div class="row row-1">
                  <div class="col col-1">
                    <p class="ellipsis">排名</p>
                  </div>
                  <div class="col col-2">
                    <p class="ellipsis">微站名</p>
                  </div>
                  <div class="col col-3">
                    <p
                      :class="
                        sortOrder === 0
                          ? 'positive ellipsis'
                          : 'reverse ellipsis'
                      "
                      @click="changeSortOrder"
                    >
                      AQI
                    </p>
                  </div>
                  <div class="col col-4">
                    <p class="ellipsis">空气质量</p>
                  </div>
                </div>
                <div class="row row-2">
                  <div class="row row-1">
                    <vue-scroll :ops="ops">
                      <div
                        v-for="(item, index) in stationArray"
                        :key="index"
                        :class="
                          stationData.deviceId === item.hourly.deviceId
                            ? 'row active'
                            : 'row'
                        "
                        @click="stationSelected(item.deviceId)"
                      >
                        <div class="row">
                          <div class="col col-1">
                            <p class="ellipsis">{{ index + 1 }}</p>
                          </div>
                          <div class="col col-2">
                            <p class="ellipsis">
                              {{ item.device.alias }}&nbsp;
                            </p>
                          </div>
                          <div class="col col-3">
                            <p class="ellipsis">
                              {{ Math.round(item.hourly.aqi) }}
                            </p>
                          </div>
                          <div class="col col-4">
                            <p
                              :class="
                                utils.validateAqi(item.hourly.aqi) + ' ellipsis'
                              "
                            >
                              &nbsp;{{
                                utils.validateAir(item.hourly.aqi)
                              }}&nbsp;
                            </p>
                          </div>
                        </div>
                      </div>
                    </vue-scroll>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col col-2">
            <div class="row row-1">
              <div class="row">
                <div class="row row-1">
                  <div class="col col-1">
                    <div class="row row-1">
                      <div class="col col-1">
                        <p class="ellipsis">{{ stationData.alias }}&nbsp;</p>
                      </div>
                      <div class="col col-2">
                        <p class="ellipsis">（{{ stationHourly.deviceId }}）</p>
                      </div>
                    </div>
                    <div class="row row-2">
                      <p class="ellipsis">
                        {{ formatterPublishDatetime(stationHourly.statsTime) }}
                      </p>
                    </div>
                  </div>
                  <div class="col col-2">
                    <div class="row row-1">
                      <div class="col col-1">
                        <p
                          :class="
                            utils.validateAqi(stationHourly.aqi) + ' ellipsis'
                          "
                        >
                          {{ utils.validateAir(stationHourly.aqi) }}
                        </p>
                      </div>
                      <div class="col col-2">
                        <p class="ellipsis">
                          {{ Math.round(stationHourly.aqi) }}
                        </p>
                      </div>
                      <div class="col col-3">
                        <p class="ellipsis">AQI</p>
                      </div>
                    </div>
                    <div class="row row-2">
                      <p class="ellipsis">
                        首要污染物：{{ stationHourly.primaryPollutant }}
                      </p>
                    </div>
                  </div>
                </div>
                <div class="row row-2">
                  <div class="col col-1">
                    <div class="row row-1">
                      <p
                        :class="
                          utils.validatePm2_5(stationHourly.pm25) + ' ellipsis'
                        "
                      >
                        PM2.5
                      </p>
                    </div>
                    <div class="row row-2">
                      <p class="ellipsis">
                        {{ stationHourly.pm25 }}
                      </p>
                    </div>
                  </div>
                  <div class="col col-2">
                    <div class="row row-1">
                      <p
                        :class="
                          utils.validatePm10(stationHourly.pm10) + ' ellipsis'
                        "
                      >
                        PM10
                      </p>
                    </div>
                    <div class="row row-2">
                      <p class="ellipsis">
                        {{ stationHourly.pm10 }}
                      </p>
                    </div>
                  </div>
                  <div class="col col-3">
                    <div class="row row-1">
                      <p
                        :class="
                          utils.validateNo2(stationHourly.no2) + ' ellipsis'
                        "
                      >
                        NO2
                      </p>
                    </div>
                    <div class="row row-2">
                      <p class="ellipsis">
                        {{ stationHourly.no2 }}
                      </p>
                    </div>
                  </div>
                  <div class="col col-4">
                    <div class="row row-1">
                      <p
                        :class="
                          utils.validateSo2(stationHourly.so2) + ' ellipsis'
                        "
                      >
                        SO2
                      </p>
                    </div>
                    <div class="row row-2">
                      <p class="ellipsis">
                        {{ stationHourly.so2 }}
                      </p>
                    </div>
                  </div>
                  <div class="col col-5">
                    <div class="row row-1">
                      <p
                        :class="
                          utils.validateCo(stationHourly.co) + ' ellipsis'
                        "
                      >
                        CO
                      </p>
                    </div>
                    <div class="row row-2">
                      <p class="ellipsis">
                        {{ stationHourly.co }}
                      </p>
                    </div>
                  </div>
                  <div class="col col-6">
                    <div class="row row-1">
                      <p
                        :class="
                          utils.validateO3(stationHourly.o3) + ' ellipsis'
                        "
                      >
                        O3
                      </p>
                    </div>
                    <div class="row row-2">
                      <p class="ellipsis">
                        {{ stationHourly.o3 }}
                      </p>
                    </div>
                  </div>
                </div>
                <div class="row row-3"></div>
                <div class="row row-4">
                  <div class="row">
                    <div class="row">
                      <div class="col col-5">
                        <p class="ellipsis">
                          {{ utils.validateWindSpeed(stationHourly.windSpeed) }}
                        </p>
                      </div>
                      <div class="col col-4">
                        <p class="ellipsis">
                          {{
                            utils.validateWindDirection(
                              stationHourly.windDirection,
                              stationHourly.windSpeed
                            )
                          }}
                        </p>
                      </div>
                      <div class="col col-3">
                        <p class="ellipsis">{{ stationHourly.pressure }}kPa</p>
                      </div>
                      <div class="col col-2">
                        <p class="ellipsis">{{ stationHourly.humidity }}%</p>
                      </div>
                      <div class="col col-1">
                        <p class="ellipsis">{{ stationHourly.temperature }}℃</p>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="row row-5">
                  <div class="row row-1">
                    <div class="row">
                      <div class="row">
                        <div class="col">
                          <p
                            :class="
                              statisticsByTime === 'hour'
                                ? 'item active ellipsis'
                                : 'item ellipsis'
                            "
                            @click="statisticsByHour()"
                          >
                            按小时
                          </p>
                        </div>
                        <div class="col">
                          <p
                            :class="
                              statisticsByTime === 'day'
                                ? 'item active ellipsis'
                                : 'item ellipsis'
                            "
                            @click="statisticsByDay()"
                          >
                            按天
                          </p>
                        </div>
                        <div class="col">
                          <p
                            :class="
                              statisticsByTime === 'month'
                                ? 'item active ellipsis'
                                : 'item ellipsis'
                            "
                            @click="statisticsByMonth()"
                          >
                            按月份
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="row row-2">
                    <div class="col">
                      <div id="echarts-station-pm25" class="echarts"></div>
                    </div>
                    <div class="col">
                      <div id="echarts-station-pm10" class="echarts"></div>
                    </div>
                    <div class="col">
                      <div id="echarts-station-temp" class="echarts"></div>
                    </div>
                    <div class="col">
                      <div id="echarts-station-humi" class="echarts"></div>
                    </div>
                    <div class="col">
                      <div id="echarts-station-co" class="echarts"></div>
                    </div>
                    <div class="col">
                      <div id="echarts-station-no2" class="echarts"></div>
                    </div>
                    <div class="col">
                      <div id="echarts-station-so2" class="echarts"></div>
                    </div>
                    <div class="col">
                      <div id="echarts-station-o3" class="echarts"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import L from "leaflet";
import "../../assets/leaflet/leaflet.ChineseTmsProviders.js";
import "../../assets/leaflet/leaflet-velocity.css";
import "../../assets/leaflet/leaflet-velocity.js";
import echarts from "echarts";
import {
  getCooperateDistrictList,
  getStationSummaryStatistics,
  getCooperateDistrictVelocity
} from "../../axios/api";
import {
  formatterAqiForEcharts,
  formatterAirQualityParametersForEcharts
} from "../../utils/conversion";
import { getStationPopupTemplate } from "../../utils/template";

export default {
  data() {
    return {
      ops: {
        bar: {
          keepShow: true,
          background: "#666"
        }
      },
      districtId: null,
      districtDataList: [],
      map: null,
      geoJSONGroup: null,
      stationBackArray: [],
      stationArray: [],
      stationLayerGroup: [],
      showKeyWord: "aqi",
      stationId: null,
      stationData: {},
      stationHourly: {},
      velocityShow: 0,
      velocityLayer: null,
      velocityData: [],
      sortOrder: 0,
      searchCondition: "",
      statisticsByTime: "hour"
    };
  },
  methods: {
    init() {
      getCooperateDistrictList(data => {
        this.districtDataList = data;
        if (this.districtDataList.length > 0) {
          this.districtData = this.districtDataList[0];
          this.districtId = this.districtData.id;
          this.initMap();
          this.loadTileLayer();
          this.loadGeoJSON();
          this.getData();
        }
      });
    },
    initMap() {
      this.map = L.map("leaflet-station", {
        center: [this.districtData.lat, this.districtData.lng],
        zoom: 13
      });
    },
    loadTileLayer() {
      L.tileLayer(
        "http://t{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles&tk=bebf738d00ce5ce52058e5d1619d4f5c",
        {
          maxZoom: 18,
          minZoom: 9,
          subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
          detectRetina: true
        }
      ).addTo(this.map);

      L.tileLayer(
        "https://t{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=bebf738d00ce5ce52058e5d1619d4f5c",
        {
          subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"]
        }
      ).addTo(this.map);
    },
    loadGeoJSON() {
      let __this = this;
      let layer = new L.geoJSON(JSON.parse(this.districtData.geojson), {
        coordsToLatLng: function(coords) {
          let wgs = __this.gps.gcj02ToWgs84(coords[1], coords[0]);
          return L.CRS.EPSG4326.unproject(L.point(wgs.lng, wgs.lat));
        },
        style: {
          fillColor: "transparent",
          color: "#ff0"
        }
      });
      this.geoJSONGroup = new L.LayerGroup();
      this.geoJSONGroup.addLayer(layer);
      this.geoJSONGroup.addTo(this.map);
    },
    getData() {
      getStationSummaryStatistics(this.districtId, data => {
        this.stationBackArray = data;
        this.stationArray = data;
        this.createMarker();

        if (this.stationArray.length > 0) {
          let stationId = this.getStationId();
          this.stationSelected(stationId);
        }
      });
      getCooperateDistrictVelocity(this.districtId, data => {
        this.velocityData = data;
      });
    },
    createMarker() {
      this.stationLayerGroup = new L.layerGroup();
      this.stationArray.forEach(item => {
        let wgs = this.gps.bd09ToWgs84(item.device.lat, item.device.lng);
        let value;
        let className;
        if (this.showKeyWord.toLowerCase() === "aqi") {
          value = item.hourly.aqi;
          className = this.utils.validateAqi(value);
        } else if (this.showKeyWord.toLowerCase() === "pm25") {
          value = item.hourly.pm25;
          className = this.utils.validatePm2_5(value);
        } else if (this.showKeyWord.toLowerCase() === "pm10") {
          value = item.hourly.pm10;
          className = this.utils.validatePm10(value);
        } else if (this.showKeyWord.toLowerCase() === "so2") {
          value = item.hourly.so2;
          className = this.utils.validatePm10(value);
        } else if (this.showKeyWord.toLowerCase() === "no2") {
          value = item.hourly.no2;
          className = this.utils.validateNo2(value);
        } else if (this.showKeyWord.toLowerCase() === "co") {
          value = item.hourly.co;
          className = this.utils.validateCo(value);
        } else if (this.showKeyWord.toLowerCase() === "o3") {
          value = item.hourly.o3;
          className = this.utils.validateO3(value);
        } else if (this.showKeyWord.toLowerCase() === "temperature") {
          value = item.hourly.temperature;
          className = "warn-color-1";
        } else if (this.showKeyWord.toLowerCase() === "humidity") {
          value = item.hourly.humidity;
          className = "warn-color-1";
        } else if (this.showKeyWord.toLowerCase() === "windspeed") {
          value = item.hourly.windSpeed;
          className = "warn-color-1";
        } else if (this.showKeyWord.toLowerCase() === "pressure") {
          value = item.hourly.pressure;
          className = "warn-color-1";
        }
        let params = {
          point: [wgs.lat, wgs.lng],
          className: className,
          value: value,
          deviceId: item.device.deviceId,
          address: item.device.alias
        };
        this.createMarkerAqi(params);
        this.createMarkerAddress(params);
      });
      this.stationLayerGroup.addTo(this.map);
    },
    createMarkerAqi(data) {
      let icon = L.divIcon({
        html: `<div class="aqi ${data.className}">
               <p class="ellipsis">${data.value}</p>
               <div class="hornlike"></div>
            </div>`,
        className: "aqi-icon",
        iconSize: [70, 30],
        iconAnchor: [35, 15],
        popupAnchor: [0, -18]
      });

      let marker = L.marker(data.point, {
        icon: icon,
        maxWidth: 280
      });
      marker.addEventListener("click", () => {
        this.stationId = data.deviceId;
        this.stationSelected(this.stationId);
      });

      this.stationLayerGroup.addLayer(marker);
    },
    stationSelected(deviceId) {
      this.stationId = deviceId;
      this.stationData = this.getStationData();
      this.stationHourly = this.stationData.hourly;
      let wgs = this.gps.bd09ToWgs84(
        this.stationData.device.lat,
        this.stationData.device.lng
      );
      this.map.panTo([wgs.lat, wgs.lng]);

      this.createPopup();

      this.loadEcharts();
    },
    getStationData() {
      return this.stationArray.find(item => {
        return item.deviceId === this.stationId;
      });
    },
    createPopup() {
      let params = {
        hourly: this.stationData.hourly,
        device: this.stationData.device
      };
      params.echartsId =
        "aqi-" + this.stationData.deviceId + "-" + new Date().getTime();
      let content = getStationPopupTemplate(params);
      let wgs = this.gps.bd09ToWgs84(
        this.stationData.device.lat,
        this.stationData.device.lng
      );
      let latLng = new L.LatLng(wgs.lat, wgs.lng);
      L.popup({
        maxWidth: 5760,
        offset: L.point(0, -12)
      })
        .setLatLng(latLng)
        .setContent(content)
        .openOn(this.map);

      let echartParams = formatterAqiForEcharts(
        this.stationData.stats.hour,
        "hour"
      );
      echartParams.id = params.echartsId;
      this.initEcharts(echartParams);
    },
    initEcharts(data) {
      let myChart = echarts.init(document.getElementById(data.id));
      myChart.setOption({
        title: {
          text: data.title,
          textStyle: {
            color: data.color,
            fontSize: 12
          },
          left: "center"
        },
        tooltip: {
          formatter: res => {
            let params = {
              name: res.seriesName,
              time: res.data.time,
              key: res.data.aqi,
              y: res.data.value,
              measurement: res.data.measurement
            };
            return this.getEchartsFormatterTemplate(params);
          }
        },
        xAxis: {
          data: data.xAxisData,
          axisLine: {
            lineStyle: {
              color: data.color, //左边线的颜色
              width: "2", //坐标线的宽度
              type: "solid"
            }
          },
          axisLabel: {
            color: data.color //坐标值得具体的颜色
          }
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              color: data.color, //左边线的颜色
              width: "2", //坐标线的宽度
              type: "solid"
            }
          },
          axisLabel: {
            color: data.color //坐标值得具体的颜色
          }
        },
        grid: {
          left: 30,
          top: 30,
          bottom: 30
        },
        series: [
          {
            type: "bar",
            name: data.seriesName,
            barMaxWidth: 10,
            itemStyle: {
              color: function(params) {
                return data.colorList[params.dataIndex];
              }
            },
            data: data.seriesData
          }
        ]
      });
    },
    getEchartsFormatterTemplate(data) {
      let time = "";
      if (data.key === "AQI") {
        let date = new Date(data.time);
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        let hour = date.getHours();
        time = year + "年" + month + "月" + day + "日" + hour + "时";
      } else if (this.statisticsByTime === "hour") {
        let date = new Date(data.time);
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        let hour = date.getHours();
        time = year + "年" + month + "月" + day + "日" + hour + "时";
      } else if (this.statisticsByTime === "day") {
        let date = new Date(data.time);
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        time = year + "年" + month + "月" + day + "日";
      } else if (this.statisticsByTime === "month") {
        let date = new Date(data.time);
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        time = year + "年" + month + "月";
      }
      let value = data.y + data.measurement;
      return `<p>时间：${time}</p>
             <p>${data.name}：${value}</p>`;
    },
    loadEcharts() {
      let AirQualityParameters = formatterAirQualityParametersForEcharts(
        this.stationData["stats"][this.statisticsByTime],
        this.statisticsByTime
      );
      AirQualityParameters.forEach(item => {
        this.initEcharts(item);
      });
    },
    createMarkerAddress(data) {
      let width = data.address.length * 22;
      let icon = L.divIcon({
        html: `<p class="${data.className} ellipsis">${data.address}</p>`,
        className: "address-icon",
        iconSize: [width, 24],
        iconAnchor: [width / 2, -26]
      });

      let marker = L.marker(data.point, {
        icon: icon
      });

      this.stationLayerGroup.addLayer(marker);
    },
    getStationId() {
      if (this.stationId === null) {
        return this.stationArray[0].deviceId;
      }
      let inList = this.stationArray.some(item => {
        return item.deviceId === this.stationId;
      });
      return inList ? this.stationId : this.stationArray[0].deviceId;
    },
    createMarkerByKey(key) {
      this.map.closePopup();
      if (this.stationLayerGroup !== null) {
        this.map.removeLayer(this.stationLayerGroup);
      }
      if (this.velocityShow === 1 && this.velocityLayer) {
        this.map.removeLayer(this.velocityLayer);
        this.velocityShow = 0;
      }
      this.showKeyWord = key.toLowerCase();
      this.createMarker();
    },
    showVelocity() {
      if (this.velocityShow === 0 && this.velocityData) {
        this.velocityLayer = L.velocityLayer({
          displayValues: true,
          displayOptions: {
            velocityType: "风",
            position: "bottomleft",
            emptyString: "未知",
            angleConvention: "bearingCW",
            displayPosition: "bottomleft",
            displayEmptyString: "未知",
            speedUnit: "m/s"
          },
          data: this.velocityData, // see demo/*.json, or wind-js-server for example data service
          // OPTIONAL
          minVelocity: 0, // 粒子的最小速度  0
          maxVelocity: 10, // 粒子的最大速度  10
          velocityScale: 0.015, // 风速的尺度 || 粒子尾巴长度  0.005
          colorScale: ["#ff0"], // 粒子颜色
          lineWidth: 2, // 线条宽度  1
          particleMultiplier: 1 / 1300, // 粒子密度 1 / 2600
          frameRate: 10, // 每秒所需帧数  10
          onAdd: null, // callback function
          onRemove: null // callback function
        });
        this.velocityLayer.addTo(this.map);
      } else {
        this.map.removeLayer(this.velocityLayer);
      }
      this.velocityShow = 1 - this.velocityShow;
    },
    flushMap() {
      this.getData();
      this.clearMap();
      this.loadGeoJSON();
      this.createMarker();
    },
    clearMap() {
      this.map.closePopup();
      if (this.geoJSONGroup !== null) {
        this.map.removeLayer(this.geoJSONGroup);
      }
      if (this.stationLayerGroup !== null) {
        this.map.removeLayer(this.stationLayerGroup);
      }
      if (this.velocityShow === 1 && this.velocityLayer) {
        this.map.removeLayer(this.velocityLayer);
        this.velocityShow = 0;
      }
    },
    changeDistrict() {
      this.districtData = this.getDistrictData();
      this.clearMap();
      this.map.panTo([this.districtData.lat, this.districtData.lng]);
      this.loadGeoJSON();
      this.getData();
    },
    getDistrictData() {
      return this.districtDataList.find(item => {
        return item.id === this.districtId;
      });
    },
    searchFunc() {
      this.stationArray = this.stationBackArray.filter(item => {
        let reg = new RegExp(this.searchCondition);
        return reg.test(item.device.alias);
      });

      this.map.closePopup();
      if (this.stationLayerGroup !== null) {
        this.map.removeLayer(this.stationLayerGroup);
      }
      this.createMarker();

      this.stationId = this.getStationId();
      this.stationSelected(this.stationId);
    },
    changeSortOrder() {
      this.sortOrder = 1 - this.sortOrder;
      this.stationArray = this.stationArray.sort(
        this.utils.compare(["hourly", "aqi"], this.sortOrder)
      );
    },
    statisticsByHour() {
      this.statisticsByTime = "hour";
      this.loadEcharts();
    },
    statisticsByDay() {
      this.statisticsByTime = "day";
      this.loadEcharts();
    },
    statisticsByMonth() {
      this.statisticsByTime = "month";
      this.loadEcharts();
    },
    formatterPublishDatetime(datetime) {
      let date = new Date(datetime);
      date.setHours(date.getHours() + 1);
      return new Date(date).format("yyyy-MM-dd hh:mm:ss");
    }
  },
  mounted() {
    this.init();
  }
};
</script>

<style lang="stylus" scoped>
#station
  position relative
  width 100%
  height 100%

  > .row-1
    height 120px

  > .row-2
    height 59px
    padding 30px 0

  > .row-3
    height 775px

    > .col-1
      width 1770px
      height 100%
      background-color #666

      > .leaflet
        position relative
        width 100%
        height 100%

        >>> .leaflet-marker-icon.address-icon

          line-height 24px
          text-align center

          p
            font-size 16px
            border-radius 5px
            background-color #fff

        >>> .leaflet-marker-icon.aqi-icon

          > .aqi
            position relative
            border-radius 5px
            text-align center
            line-height 28px
            font-size 20px
            color #fff

            > .hornlike
              position absolute
              left 18px
              bottom -10px
              margin -5px 0 0 5px
              border-left 1px solid transparent
              border-right 8px solid transparent

        >>> .leaflet-popup-content-wrapper
          color #000

          > .leaflet-popup-content
            position relative

            > .container
              position relative
              width 270px
              margin 0 auto

              .row
                position relative

                > .col
                  float left
                  position relative

              .row::after
                content ''
                display block
                clear both

              > .row-1
                > .col-1
                  width 200px

                  > .row-1
                    font-size 22px

                  > .row-2
                    font-size 14px
                    color #6E6E6E

                > .col-2
                  width 70px

                  > .row-1
                    border-radius 3px
                    text-align center
                    line-height 24px
                    font-size 18px
                    color #fff

              > .row-2
                font-size 14px
                color #6E6E6E

              > .row-3
                padding 15px 0 5px 0

                > .col:nth-of-type(3n + 1)
                  margin-left 0

                > .col
                  margin-left 7px

                  > .row-1
                    width 85px
                    height 25px
                    text-align center
                    line-height 25px
                    font-size 14px
                    color #fff

                    > p
                      border-radius 8px

                  > .row-2
                    width 85px
                    height 25px
                    margin-top 4px
                    text-align center
                    line-height 25px
                    font-size 18px
                    color #666

              > .row-4
                margin 0 -21px
                height 1px
                border none
                background-color #6E6E6E

              > .row-5
                line-height 30px
                padding 10px 0 10px 0

                > .col:nth-of-type(3n + 1)
                  margin-left 0

                > .col
                  margin-left 7px
                  width 85px
                  font-size 14px
                  color #6E6E6E

                  > p
                    padding-left 17px

                  > p::before
                    content ''
                    position absolute
                    top 0
                    left 0
                    width 15px
                    height 30px

                > .col:nth-of-type(n + 4)
                  margin-top 5px

                > .col:nth-of-type(1)
                  > p::before
                    background url("../../assets/img/station/20190715173751.png") no-repeat 2px 10px
                    background-size 121px 35px

                > .col:nth-of-type(2)
                  > p::before
                    background url("../../assets/img/station/20190715173751.png") no-repeat -52px 10px
                    background-size 121px 35px

                > .col:nth-of-type(3)
                  > p::before
                    background url("../../assets/img/station/20190715173751.png") no-repeat -105px 8px
                    background-size 121px 35px

                > .col:nth-of-type(4)
                  > p::before
                    background url("../../assets/img/station/20190715173751.png") no-repeat 2px -15px
                    background-size 121px 35px

                > .col:nth-of-type(5)
                  > p::before
                    background url("../../assets/img/station/20190715173751.png") no-repeat -51px -13px
                    background-size 121px 35px

              > .row-6
                height 150px

                > .echarts
                  height 150px


        >>> .leaflet-control-container
          > .leaflet-bottom.leaflet-left
            > .leaflet-control-velocity.leaflet-control
              padding 5px 8px
              background-color #fff
              border-radius 5px

      > .select
        position absolute
        top 15px
        right 15px
        z-index 999

      > .velocity
        position absolute
        bottom 10px
        right 10px
        width 40px
        height 40px
        background-color rgba(255, 255, 255, 0.8)
        border-radius 5px
        z-index 999

      > .velocity::after
        content ''
        position absolute
        top 0
        left 0
        width 40px
        height 40px
        background url("../../assets/img/feng.png") no-repeat 5px 5px
        background-size 30px 30px

      > .velocity.active::after
        content ''
        position absolute
        top 0
        left 0
        width 40px
        height 40px
        background url("../../assets/img/feng-active.png") no-repeat 5px 5px
        background-size 30px 30px

      > .flush
        position absolute
        bottom 70px
        right 10px
        width 40px
        height 40px
        background-color rgba(255, 255, 255, 0.8)
        border-radius 5px
        z-index 999

      > .flush::after
        content ''
        position absolute
        top 0
        left 0
        width 40px
        height 40px
        background url("../../assets/img/20191129091455.png") no-repeat 5px 7px
        background-size 31px 27px

      > .show-keyword
        position absolute
        top 150px
        left 0
        z-index 999

        > .row
          position: relative;
          width 66px

          > .col
            position relative
            width 100%
            padding-top 3px

            p
              background-color rgba(255, 255, 255, .8)
              border-radius 5px
              line-height 32px
              text-align center
              font-size 14px
              color #000

            > p.active
              background-color #00a0e9
              color #FFF


    > .col-2
      width 1600px
      height 775px
      background-color #001852

      > .row-1
        height 107px

        > .col-1
          width 800px
          height 100%
          font-size 24px
          color #fff

          > .row
            height 33px
            padding 37px 15px 37px 30px

            > p
              position relative
              padding-left 38px
              line-height 33px

            > p::before
              content ''
              position absolute
              top 0
              left 0
              width 33px
              height 33px
              background url("../../assets/img/20190718140035.png") no-repeat top left
              background-size 33px 33px

        > .col-2
          width 800px
          height 107px

          > .row
            padding 37px 30px 37px 15px

            > .row
              height 33px

              > .col-1
                width 668px

                > input
                  width 318px
                  height 29px
                  float right
                  padding 1px 10px
                  border 1px solid #00a0e9
                  outline 0
                  background-color #022776
                  font-size 18px
                  color #fff

              > .col-2
                width 72px

                > .button
                  width 72px
                  height 33px
                  background-color #00a0e9
                  cursor pointer

                > .button::after
                  content ''
                  position absolute
                  top 7px
                  left 27px
                  width 18px
                  height 19px
                  background url("../../assets/img/station/20190718140042.png") no-repeat top left
                  background-size 18px 19px

      > .row-2
        height 680px

        > .col-1
          width 800px
          height 100%

          > .row
            padding 0 15px 0 30px

            > .row
              height 100%

              > .row-1
                line-height 40px
                text-align center
                font-size 18px
                color #fff

                > .col-1
                  width 100px

                > .col-2
                  width 260px

                > .col-3
                  width 180px
                  cursor pointer

                  > p.positive::after
                    content ''
                    position absolute
                    top 13px
                    right 35px
                    width 9px
                    height 13px
                    background url("../../assets/img/station/20190718160256.png") no-repeat top left
                    background-size 19px 13px

                  > p.reverse::after
                    content ''
                    position absolute
                    top 13px
                    right 35px
                    width 9px
                    height 13px
                    background url("../../assets/img/station/20190718160256.png") no-repeat -11px 0
                    background-size 19px 13px

                > .col-4
                  width 180px

              > .row-2
                text-align center
                font-size 18px
                color #fff

                .row-1
                  height 600px

                  > .__vuescroll
                    > .__panel
                      > .__view
                        > .row
                          width 720px
                          height 50px
                          line-height 50px
                          z-index 9
                          cursor pointer

                          > .row
                            > .col
                              > p
                                overflow hidden
                                white-space nowrap
                                text-overflow ellipsis

                            > .col-1
                              width 100px

                            > .col-2
                              width 260px

                            > .col-3
                              width 180px

                            > .col-4
                              width 180px

                              > p
                                width 110px
                                height 30px
                                line-height 30px
                                margin 10px auto
                                border-radius 10px

                        > .row::after
                          content ''
                          position absolute
                          bottom 0
                          left -25px
                          width 745px
                          height 2px
                          background url("../../assets/img/20190708145229.jpg") no-repeat top left
                          background-size 745px 2px
                          z-index -1

                        > .row.active
                          > .row
                            height 50px
                            line-height 46px
                            box-sizing: border-box;
                            border 2px solid #fc7500
                            background-color #541e04


                            > .col-1
                              width 96px
                              padding-right 2px

                            > .col-4
                              width 176px
                              padding-left 2px

                              > p
                                width 110px
                                height 31px
                                line-height 31px
                                margin 7px auto
                                border-radius 10px

        > .col-2
          width 800px
          height 640px

          > .row
            padding 0 30px 0 15px
            height 100%

            > .row
              height 100%

              > .row-1
                height 80px

                > .col-1
                  width 530px
                  height 80px

                  > .row-1
                    > .col-1
                      padding-left 5px
                      line-height 55px

                      > p
                        font-size 24px
                        color #fff

                    > .col-2
                      padding 22px 0 0
                      line-height 20px

                      > p
                        font-size 16px
                        color #fff

                  > .row-2
                    padding-left 5px
                    line-height 25px

                    > p
                      font-size 16px
                      color #6E6E6E

                > .col-2
                  width 225px
                  height 80px

                  > .row-1
                    height 35px

                    > .col
                      float right

                    > .col-1
                      height 35px

                      > p
                        height 35px
                        padding 0 8px
                        border-radius 5px
                        line-height 35px
                        font-size 20px
                        color #fff

                    > .col-2
                      height 35px
                      padding 0 5px

                      > p
                        line-height 35px
                        font-size 20px
                        color #fff

                    > .col-3
                      padding-top 5px
                      height 25px

                      > p
                        line-height 30px
                        font-size 14px
                        color #fff

                  > .row-2
                    height 45px

                    > p
                      line-height 35px
                      text-align right
                      font-size 18px
                      color #fff

              > .row-2
                height 75px
                padding 15px 0 10px 0

                > .col:nth-of-type(1)
                  margin-left 0

                > .col
                  margin-left 25px

                  > .row-1
                    width 105px
                    height 30px
                    text-align center
                    line-height 30px
                    font-size 16px
                    color #fff

                    > p
                      border-radius 8px

                  > .row-2
                    width 105px
                    height 30px
                    margin-top 4px
                    text-align center
                    line-height 30px
                    font-size 20px
                    color #fff

              > .row-3
                position relative
                height 1px
                background-color #6E6E6E

              > .row-4
                height 65px

                > .row
                  padding 10px 0

                  > .row
                    height 45px
                    line-height 45px

                    > .col:nth-last-of-type(1)
                      margin-left 0

                    > .col
                      margin-left 35px
                      font-size 18px
                      color #fff

                      > p
                        padding 0 10px 0 30px

                      > p::before
                        content ''
                        position absolute
                        top 0
                        left 0
                        width 30px
                        height 45px

                    > .col
                      float right

                    > .col:nth-of-type(1)
                      > p::before
                        background url("../../assets/img/station/20190715173751.png") no-repeat -104px -33px
                        background-size 242px 69px

                    > .col:nth-of-type(2)
                      > p::before
                        background url("../../assets/img/station/20190715173751.png") no-repeat 4px -36px
                        background-size 242px 69px

                    > .col:nth-of-type(3)
                      > p::before
                        background url("../../assets/img/station/20190715173751.png") no-repeat -210px 8px
                        background-size 242px 69px

                    > .col:nth-of-type(4)
                      > p::before
                        background url("../../assets/img/station/20190715173751.png") no-repeat -104px 10px
                        background-size 242px 69px

                    > .col:nth-of-type(5)
                      > p::before
                        background url("../../assets/img/station/20190715173751.png") no-repeat 3px 10px
                        background-size 242px 69px

              > .row-5
                height 394px

                > .row-1
                  height 46px

                  > .row
                    padding 5px 0

                    > .row
                      height 36px

                      > .col
                        width 88px
                        height 36px
                        text-align center

                        > p
                          box-sizing: border-box;
                          border-top 1px solid #00a0e9
                          border-right 1px solid #00a0e9
                          border-bottom 1px solid #00a0e9
                          cursor pointer
                          line-height 34px
                          font-size 16px
                          color #00a0e9

                        > p.active
                          background-color #0490d9
                          color #fff

                      > .col:nth-of-type(1)
                        > p
                          border-left 1px solid #00a0e9

                > .row-2
                  height 376px

                  > .col
                    width 188px
                    height 174px

                    > .echarts
                      position relative
                      width 100%
                      height 100%
</style>
